<div class="DashboardGraphs">
    <div class="DashboardGraphs-headerSection">
        <h3 class="DashboardGraphs-headerText">
            <translate>JOB STATUS</translate>
        </h3>
        <div class="DashboardGraphs-graphToolbar" ng-show="!hostStatusSelected">
            <div class="DashboardGraphs-filteringDropdowns">
                <div class="DashboardGraphs-filterLabel" translate>Period</div>
                <div class="DashboardGraphs-periodDropdown">
                    <a id="period-dropdown" role="button"
                    data-toggle="dropdown"
                    data-target="#"
                    href="/page.html"
                    class="DashboardGraphs-filterDropdownText">
                        <translate>Past Month</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                    </a>
                    <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                        DashboardGraphs-filterDropdownItems--period" role="menu" aria-labelledby="period-dropdown">
                        <li>
                            <a class="n" id="day" translate>Past 24 Hours </a>
                        </li>
                        <li>
                            <a class="n" id="week" translate>Past Week</a>
                        </li>
                        <li>
                            <a class="n" id="month" translate>Past Month</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="DashboardGraphs-filteringDropdowns">
                <div class="DashboardGraphs-filterLabel" translate>Job Type</div>
                <div class="DashboardGraphs-jobTypeDropdown">

                        <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" class="DashboardGraphs-filterDropdownText"
                        href="/page.html">
                            <translate>All</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                        </a>

                    <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                        DashboardGraphs-filterDropdownItems--jobType" role="menu" aria-labelledby="type-dropdown">
                        <li>
                            <a class="m" id="all" translate>All</a>
                        </li>
                        <li>
                            <a class="m" id="inv_sync" translate>Inventory Sync</a>
                        </li>
                        <li>
                            <a class="m" id="scm_update" translate>SCM Update</a>
                        </li>
                        <li>
                            <a class="m" id="playbook_run" translate>Playbook Run</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="DashboardGraphs-filteringDropdowns">
                <div class="DashboardGraphs-filterLabel" translate>View</div>
                <div class="DashboardGraphs-statusDropdown">
                    <a id="status-dropdown" role="button"
                    data-toggle="dropdown"
                    data-target="#"
                    href="/page.html"
                    class="DashboardGraphs-filterDropdownText">
                        <translate>All</translate>
                        <i class="fa fa-angle-down
                            DashboardGraphs-filterIcon">
                        </i>
                    </a>

                    <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                        DashboardGraphs-filterDropdownItems--status" role="menu" aria-labelledby="status-dropdown">
                        <li>
                            <a class="o" id="both" translate>All</a>
                        </li>
                        <li>
                            <a class="o" id="failed" translate>Successful</a>
                        </li>
                        <li>
                            <a class="o" id="successful" translate>Failed</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="DashboardGraphs-graphSection">
        <div class="DashboardGraphs-graphContainer" auto-size-module
            graph-type="jobsStatus"
            ng-class="{'is-selected': jobStatusSelected }">
            <job-status-graph class="DashboardGraphs-graph
                DashboardGraphs-graph--jobStatusGraph"
                data="graphData.jobStatus" period="month" job-type="all">
            </job-status-graph>
        </div>
    </div>
</div>
